<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>酒店</title>
  </head>
  <style>
    * {
      padding: 0;
      margin: 0;
      outline: none;
      border: none;
    }

    body {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(31, 32, 41);
    }

    .shell {
      width: 300px;
      height: 350px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      perspective: 1000px;
      /* 给最外层加上一个透视，否则接下去的翻转会没有3d的效果 */
    }

    .top {
      width: 300px;
      display: flex;
      cursor: pointer;
      justify-content: space-evenly;
    }

    .off,
    .on {
      color: #fff;
      transition: 0.5s;
      font: 300 20px "";
    }

    .on {
      opacity: 0.5;
    }

    .button {
      width: 60px;
      height: 25px;
      background-color: rgb(255, 235, 167);
      border-radius: 20px;
      position: relative;
    }

    .ball {
      position: absolute;
      width: 25px;
      height: 25px;
      background-color: rgb(46, 45, 56);
      border-radius: 50%;
      transition: 0.5s;
      box-shadow: 0 0 10px #000;
      left: 0;
      transform: translate(-1px);
    }

    .bottom {
      width: 300px;
      height: 250px;
      background-image: url(./background.png);
      transform-style: preserve-3d;
      /* 使元素呈现出3D效果 */
      position: relative;
      transition: 0.7s;
      border-radius: 5px;
    }

    .bottom > div {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
    }

    .bottom > div h2 {
      color: white;
    }

    .bottom > div input {
      width: 200px;
      height: 25px;
      padding: 0 10px;
      background-color: rgb(31, 32, 41);
      color: #fff;
    }

    .bottom > div button {
      width: 80px;
      height: 30px;
      color: #333;
      font-size: 15px;
      background-color: rgb(255, 235, 167);
      border-radius: 4px;
      transition: 0.3s;
      margin-bottom: 10px;
      cursor: pointer;
      box-shadow: 0 0 10px rgb(255, 235, 167);
    }

    .bottom > div button:hover {
    }

    .signIn {
      transform: translateZ(70px);
      /* 在这里我们将卡片里面内容和卡片有一个距离，这样子会更有立体感 */
    }

    .signUp {
      position: absolute;
      top: 0;
      transform: translateZ(-70px) rotateY(180deg);
      /* 我们给反面加上距离的时候，前往不要忘记给反面的内容也翻转一下，否则就会出现这种卡片转过来了，里面的内容也反了 */
    }
  </style>

  <body>
    <div class="shell">
      <div class="top">
        <span class="off">SIGN IN</span>
        <div class="button">
          <div class="ball"></div>
        </div>
        <span class="on">SIGN UP</span>
      </div>

      <div class="bottom">
        <div class="signIn">
          <h2>Sign in</h2>
          <input type="text" id="username" placeholder="Username" />
          <input type="password" id="password" placeholder="Password" />
          <button id="login">GO</button>
        </div>
        <div class="signUp">
          <h2>Sign up</h2>
          <input type="text" id="Rusername" placeholder="Username" />
          <input type="password" id="Rpassword" placeholder="Password" />
          <input type="password" id="RCpassword" placeholder="Confirm password" />
          <button id="register">GO</button>
        </div>
      </div>
    </div>
    <script src="plugins/jquery/jquery.min.js"></script>
    <script>
      localStorage.clear()
      $("#login").on("click", function () {
        data = {
          username: $("#username").val(),
          password: $("#password").val(),
        };
        $.ajax({
          url: "https://douzi.wiki:7000/GROW/api/user/login",
          type: "GET",
          contentType: "application/json",
          dataType: "json",
          data: data,
          success: function (res) {
            if (res.code == 0) {
              localStorage.setItem("nowuser", JSON.stringify(res.data));
              window.location.href = "HotelUser-hotel.html";
            } else {
              alert("您输入用户名或密码有误");
            }
          },
          error: function (res) {},
        });
      });

      $("#register").on("click", function () {
        password = $("#Rpassword").val();
        Cpassword = $("#RCpassword").val();
        if (password == Cpassword) {
          data = {
            username: $("#Rusername").val(),
            password: $("#Rpassword").val(),
          };
          $.ajax({
            url: "https://douzi.wiki:7000/GROW/api/user/register",
            type: "GET",
            contentType: "application/json",
            dataType: "json",
            data: data,
            success: function (res) {
              if (res.code == 0) {
                alert("注册成功");
              } else {
                alert("注册失败");
              }
            },
            error: function (res) {},
          });
        } else {
          alert("您输入的两次密码不一样");
        }
      });
    </script>
    <script>
      let button = document.querySelector(".button");
      let ball = document.querySelector(".ball");
      let bottom = document.querySelector(".bottom");
      let off = document.querySelector(".off");
      let on = document.querySelector(".on");
      let index = 0;
      button.addEventListener("click", () => {
        if (index == 0) {
          index = 1;
          ball.style.left = 61 + "%";
          on.style.opacity = 1;
          off.style.opacity = 0.5;
          bottom.style.transform = "rotateY(180deg)";
        } else {
          index = 0;
          ball.style.left = 0;
          on.style.opacity = 0.5;
          off.style.opacity = 1;
          bottom.style.transform = "rotateY(0deg)";
        }
      });
    </script>
  </body>
</html>
